<template>
    <el-dialog
        class="custom-modal"
        :title="title"
        :visible.sync="show"
        append-to-body
        top="20vh"
        @open="_open"
        @close="_close"
        @closed="_afterClose"
        :close-on-click-modal="false"
        v-auto-focus
    >
        <div class="option-value-box">
            <validation-observer ref="observerRef">
                <el-form
                    class="custom-form"
                    label-position="top"
                    label-width="120"
                    ref="formRef"
                >
                    <validation-provider
                        name="model.name"
                        vid="model.name"
                        :rules="{ required: true }"
                        :customMessages="{ required: '请输入分类名称' }"
                        v-slot="{ errors }"
                        slim
                    >
                        <el-form-item label="分类名称" required>
                            <div
                                class="cf__group"
                                :class="{ error: errors.length > 0 }"
                            >
                                <div class="cf__group-info">
                                    <el-input
                                        v-model="model.name"
                                        name="model.name"
                                        placeholder="请输入分类名称"
                                        maxlength="10"
                                        auto-complete="off"
                                    >
                                    </el-input>
                                </div>
                                <div class="cf__group-tips">
                                    <template v-if="errors.length > 0">
                                        {{ errors[0] }}
                                    </template>
                                </div>
                            </div>
                        </el-form-item>
                    </validation-provider>
                    <validation-provider
                        name="model.field"
                        vid="model.field"
                        :rules="{ required: true }"
                        :customMessages="{ required: '请输入英文字段' }"
                        v-slot="{ errors }"
                        slim
                    >
                        <el-form-item label="英文字段" required>
                            <div
                                class="cf__group"
                                :class="{ error: errors.length > 0 }"
                            >
                                <div class="cf__group-info">
                                    <el-input
                                        v-model="model.field"
                                        name="model.name"
                                        placeholder="请输入英文字段"
                                        maxlength="100"
                                        auto-complete="off"
                                    >
                                    </el-input>
                                </div>
                                <div class="cf__group-tips">
                                    <template v-if="errors.length > 0">
                                        {{ errors[0] }}
                                    </template>
                                    <template v-else>
                                        不可与其他分类英文字段重复
                                    </template>
                                </div>
                            </div>
                        </el-form-item>
                    </validation-provider>
                    <validation-provider
                        v-if="showIcon"
                        name="model.icon"
                        vid="model.icon"
                        :rules="{ required: true }"
                        :customMessages="{ required: '请上传资源图标，图片大小不超过50kb' }"
                        v-slot="{ errors }"
                        slim
                    >
                        <el-form-item label="图标" required>
                            <div
                                class="cf__group"
                                :class="{ error: errors.length > 0 }"
                            >
                                <div class="cf__group-info">
                                    <upLoad-cos
                                        :list="iconList"
                                        :before-upload="_beforeUpload"
                                        :headImg="true"
                                        :isSingle="true"
                                        @onUpdate="onUpdate"
                                        :limit="1"
                                        :accept="`.jpg,.jpeg,.png,.gif`"
                                        type="resource-icon"
                                        fileType="img">
                                    </upLoad-cos>
                                    <!-- 用来校验的 -->
                                    <el-input
                                        style="display: none"
                                        v-model="model.icon"
                                        name="model.icon"
                                        auto-complete="off">
                                    </el-input>
                                </div>
                                <div class="cf__group-tips">
                                    <template v-if="errors.length > 0">
                                        {{ errors[0] }}
                                    </template>
                                    <template v-else>
                                        图片大小不超过50kb
                                    </template>
                                </div>
                            </div>
                        </el-form-item>
                    </validation-provider>
                    <validation-provider
                        v-if="showColor"
                        name="model.name"
                        vid="model.name"
                        :rules="{ required: true }"
                        :customMessages="{ required: '请选择分类主题色' }"
                        v-slot="{ errors }"
                        slim
                    >
                        <el-form-item label="分类主题色" required>
                            <div
                                class="cf__group"
                                :class="{ error: errors.length > 0 }"
                            >
                                <div class="cf__group-info">
                                    <el-color-picker v-model="model.color"></el-color-picker>
                                </div>
                                <div class="cf__group-tips">
                                    <template v-if="errors.length > 0">
                                        {{ errors[0] }}
                                    </template>
                                </div>
                            </div>
                        </el-form-item>
                    </validation-provider>
                </el-form>
            </validation-observer>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button class="sure" type="primary" @click="sure()" :loading="ajaxLoader">保存</el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import UpLoadCos from "@/components/upload-cos/index.vue";

interface FormModel {
    name: string;
    field: string;
    icon: string;
    color: string | null;
}

@Component({
    components: {
        UpLoadCos
    }
})
export default class DragOptionForm extends Vue {
    title = "分类信息";
    show = false;
    ajaxLoader = false;
    ajaxIndex = 0;

    model: FormModel = {
        name: "",
        field: "",
        icon: "",
        color: null
    };

    iconList: any[] = []

    dialogVisible = false;
    disabled = false;
    dialogImageUrl = "";
    // 显示上传图标
    showIcon = false;
    showColor = false;

    onUpdate(list: any) {
        this.model.icon = list[0].url;
        this.iconList = list;
    }

    async _open() {
        this.$emit("onopen");
        console.log(this.iconList);
    }

    _close() {
        this.$emit("onclose");
    }

    _afterClose() {
        this.$nextTick(function() {
            this.$emit("onafterclose");
            this.$el.remove && this.$el.remove();
        });
    }

    loader(state: boolean) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    close() {
        this.show = false;
        this.$emit("close");
    }

    // 上传前判断
    _beforeUpload(file: any) {
        return new Promise((resolve, reject) => {
            const maxSize = 50 * 1024;
            if (file.size > maxSize) {
                this.$message.error("上传图标大小请勿超过50kb!");
                reject();
            } else {
                resolve(true);
            }
        });
    }

    async sure() {
        const observerRef: any = this.$refs.observerRef;
        const validateResult: any = await observerRef.validate();
        if (validateResult) {
            this.$emit("sure", {
                ...this.model,
                field: this.model.field.replace(/\s/g, "")
            });
        } else {
            this.$message({
                duration: 3000,
                message: "请确保表单数据有效！",
                type: "error"
            });
        }
    }
}
</script>
<style scoped lang="scss">
.custom-modal {
    margin: 0;
    & /deep/ {
        .el-dialog {
            width: 4.5rem;
        }
        .custom-form .cf__group .el-textarea.el-input--medium,
        .custom-form .cf__group .el-date-editor.el-input,
        .custom-form
            .cf__group
            .el-textarea.el-input--medium
            .el-textarea__inner,
        .custom-form .cf__group .el-input--medium .el-input__inner {
            width: 100%;
        }
        .el-form-item__label {
            padding: 0;
        }
    }
}
</style>
